<template>
  <div class="Echarts">
    <div class="shuju">
      <div class="title">销售数据</div>
      <span class="sub-title">2022.10.24 ~ 2022.10.30</span>
    </div>
    <div class="current-sales">
      <div id="current" style="width: 490px;height: 278px;" />
      <div id="sales" style="width: 490px;height: 278px;" />
    </div>
  </div>
</template>

<script>
import { amountCollectAPI, regionCollectAPI } from '@/api/goods'
export default {
  name: 'Echarts',
  data() {
    return {
      xData: [],
      yData: [],
      bData: [],
      hData: []
    }
  },
  watch: {
    xData() {
      this.myEcharts()
    },
    yData() {
      this.myEcharts()
    },
    bData() {
      this.myEcharts()
    },
    hData() {
      this.myEcharts()
    }
  },
  mounted() {
    this.myEcharts()
    this.amountCollect()
    this.regionCollect()
  },
  methods: {

    myEcharts() {
      const myChart1 = this.$echarts.init(document.getElementById('current'))
      const myChart2 = this.$echarts.init(document.getElementById('sales'))

      // 配置图表
      const option1 = {

        title: {
          left: 'center',
          text: '销售额趋势图'
        },
        xAxis: {
          type: 'category',
          data: this.xData
        },
        yAxis: {
          name: '单位：元',
          type: 'value',
          max: 500000,
          axisLabel: {
            interval: 0, // 坐标轴刻度标签的显示间隔(在类目轴中有效) 0:显示所有  1：隔一个显示一个 :3：隔三个显示一个...
            rotate: -20 // 标签倾斜的角度，显示不全时可以通过旋转防止标签重叠（-90到90）
          }

        },
        series: [
          {
            data: this.yData,
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            sampling: 'average',
            stack: 'a',
            itemStyle: {
              color: 'rgb(255, 70, 131)'
            },
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(253, 218, 219)'
                },
                {
                  offset: 1,
                  color: 'rgb(253, 218, 219)'
                }
              ])
            }

          }

        ]
      }
      const option2 = {
        title: {
          left: 'center',
          text: '销售额分布'
        },
        xAxis: {
          type: 'category',
          data: this.bData,

          axisLabel: {
            interval: 0,
            width: 48,
            overflow: 'truncate' // 溢出掩藏
          }

        },
        yAxis: {
          name: '单位：元',
          type: 'value',
          max: 1500000,
          axisLabel: {
            interval: 0, // 坐标轴刻度标签的显示间隔(在类目轴中有效) 0:显示所有  1：隔一个显示一个 :3：隔三个显示一个...
            rotate: -60 // 标签倾斜的角度，显示不全时可以通过旋转防止标签重叠（-90到90）
          }
        },
        series: [
          {
            data: this.hData,
            type: 'bar',
            barMaxWidth: 30 // 设置柱子宽度
          }
        ]
      }
      myChart1.setOption(option1)
      myChart2.setOption(option2)
    },
    async amountCollect() {
      const res = await amountCollectAPI('1', '2022-10-24', '2022-10-30')
      // console.log(res)
      this.yData = res.data.series
      this.xData = res.data.xAxis
    },
    async regionCollect() {
      const res = await regionCollectAPI('2022-10-24', '2022-10-30')
      console.log(res)
      this.bData = res.data.xAxis
      this.hData = res.data.series
    }
  }
}
</script>

<style scoped lang="scss">
  .Echarts {
    padding: 5px;
    .shuju{
        display: flex;
        align-items: center;
        .title {
            font-size: 16px;
            font-family: PingFangSC-Semibold,PingFang SC;
            font-weight: 600;
            color: #333;
        }
        .sub-title {
            margin-left: 10px;
            font-size: 12px;
            font-family: PingFangSC-Regular,PingFang SC;
            font-weight: 400;
            color: #999;
        }
    }
    .current-sales{
      display: flex;
    }
  }
</style>
